<template>
	<view class="my-profile">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">我的资料</block>
		</cu-custom>
		<view class="persomfir solid-bottom">
			<view>个人资料</view>
		</view>
		<view class="personProfile" style="background-color: #FFFFFF;">
			<view class="profileList flex">
				<view class="tarword">姓名</view>
				<input class="inputs" placeholder="请输入真实姓名" v-model="real_name"/>
			</view>
			<view class="profileList flex">
				<view class="tarword">手机号</view>
				<input class="inputs" placeholder="请输入电话号码" v-model="phone"/>
			</view>
			<view class="profileList flex">
				<view class="tarwords">生日</view>
				<view class="cu-form-group" v-model="birthday">
					<!-- <view class="title">日期选择</view> -->
					<picker mode="date" :value="birthday" @change="DateChange">
						<view class="picker">
							<view class="datalocat">
								{{birthday||'请选择日期'}}
							</view>
						</view>
					</picker>
				</view>
				<!-- <input class="inputs" placeholder="请输入您的生日" v-model="birthday"/> -->
			</view>
			<!-- <view class="profileList">
				<text>生日</text>
				<text class="wordright">
					
				    <text class="cuIcon-right"></text>
				</text>
			</view> -->
			<view class="profileList flex">
				<view class="tarword">微信号</view>
				<input class="inputs" placeholder="请输入微信号" v-model="weixin"/>
			</view>
		</view>
		<view class="persomfir solid-bottom">
			<view>求职资料</view>
		</view>
		<view class="personProfile" style="background-color: #FFFFFF;">
			<view class="profileList flex">
				<view class="tarword">本人专业</view>
				<input class="inputs" placeholder="请描述您学习的专业" v-model="major"/>
			</view>
			<view class="profileList flex">
				<view class="tarword">期望岗位</view>
				<input class="inputs" placeholder="请描述您期望的岗位" v-model="job_hope"/>
			</view>
			<view class="profileList flex">
				<view class="tarword">目前状况</view>
				<input class="inputs" placeholder="请描述您目前的状况" v-model="situation"/>
			</view>
			<view class="profileList flex">
				<view class="tarword">我的学历</view>
				<input class="inputs" placeholder="请描述您的学位信息" v-model="degree"/>
			</view>
			<view class="profileList flex">
				<view class="tarwords">入学时间</view>
				<view class="cu-form-group" v-model="student_time">
					<!-- <view class="title">日期选择</view> -->
					<picker mode="date" :value="student_time" @change="DateChanges">
						<view class="picker">
							<view class="datalocats">
								{{student_time||'请选择日期'}}
							</view>
						</view>
					</picker>
					<!-- <picker mode="date" :value="student_time" @change="DateChanges">
						<view class="picker">
							<view class="datalocats">
								{{student_time}}
							</view>
						</view>
					</picker> -->
				</view>
				<!-- <input class="inputs" placeholder="请填写您的入学时间" v-model="student_time"/> -->
			</view>
		</view>
		<!-- <view class="persomfir solid-bottom">
			<view class="flex">
				<text class="wordTir">技能掌握</text>
				<text class="cuAdd">
					<text class="cuIcon-add"></text>
					<text>添加</text>
				</text>
			</view>
			<view class="tags">
				<text class="tag-item" v-for="tag of 10" :key="tag">英语四级{{tag}}</text>
			</view>
		</view> -->
		<view class="info-box">
			<view class="info-title flex"  @tap="showModal" data-target="bottomModal">
				<text class="wordTir">掌握技能</text>
				<text class="cuAdd">
					<text class="cuIcon-add"></text>
					<text>添加</text>
				</text>
			</view>
			<view class="info-content flex">
				<view class="tag-item" v-for="(item,index) in tip" :key="index" @tap="removetip(index)">{{item}}</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" style="border-radius: 5rpx;">
			<view class="cu-dialog">
				<view class="modal_box">
					<view class="control_box flex">
						<view class="apply_text">掌握的技能</view>
						<text class="cancel_text iconfont icon-guanbi" @tap="hideModal"></text>
					</view>
					<view class="imput_information">
						<view class="input_box flex">
							<text class="iconfont icon-weibiaoti562 person_box"></text>
							<text class="linkman">技能</text>
							<input v-model="skills" class="inputskill" placeholder="请输入" style="margin-left: 30rpx; text-align: left; height: 80rpx; line-height: 80rpx; width: 75%;"/>
						</view>
						<view class="modalbut flex">
							<button class="lin" @tap="hideModal" style="width: 225rpx;height: 65rpx; line-height: 65rpx; border-radius: 50rpx; border:solid; border-color: #3b73f6 ; border-width: 1px;">
								<text style="font-size: 30rpx; color: #3b73f6;">取消</text>
							</button>
							<button @tap="addtip" style="width: 225rpx;height: 65rpx; line-height: 65rpx;background-color: #3b73f6;border-radius: 50rpx;">
								<text style="color: #ffffff;font-size: 30rpx;">确定</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="personProfile" style="background-color: #FFFFFF; float: left;">
			<view class="tags">
				<text class="tagList">英语四级</text>
			</view>
		</view> -->
		<view class="bar-btn">
			<button class="lin" @tap="cmback" style="width: 335rpx;height: 80rpx; line-height: 80rpx; border-radius: 50rpx; border:solid; border-color: #3b73f6 ; border-width: 1px;">
				<text style="font-size: 30rpx; color: #3b73f6;">取消</text>
				</button>
			<button @tap="leftFile" style="width: 335rpx;height: 80rpx; line-height: 80rpx;background-color: #3b73f6;border-radius: 50rpx;">
				<text style="color: #ffffff;font-size: 30rpx;">保存</text>
			</button>
		</view>

		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,msg,timeToStr} = require("@/utils/common.js")
	export default {
		data() {
			return {
				tip:[
					// {
					// 	name:'英语四级'
					// },
					// {
					// 	name:'C1驾照'
					// },
				],
				real_name:'',
				phone:'',
				student_time:'2019-12-25',
				job_hope:'',
				situation:'',
				degree:'',
				skills:'',
				modalName: null,
				birthday:'2000-12-25',
				weixin:'',
				major:''
			}
		},
		onLoad() {
			appLogin((user_info)=>{
				console.log(user_info)
				this.real_name = user_info.real_name
				this.phone = user_info.phone
				this.birthday = timeToStr(user_info.birthday)
				this.weixin = user_info.weixin
				this.major = user_info.major
				this.getstudentinfo()
			})
		},
		methods: {
			getstudentinfo(){
				httpGet({
					url:'/api/student/info'
				}).then((res)=>{
					console.log(res.result)
					this.student_time = res.result.student_time
					this.birthday = res.result.birthday
					this.job_hope = res.result.job_hope
					this.major = res.result.major
					this.situation = res.result.situation
					this.degree = res.result.degree
					this.real_name = res.result.real_name
					this.tip = res.result.skills||[]
					
				})
			},
			showModal(e) {
				this.skills = '';
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			cmback(){
				uni.reLaunch({
					url:"/pages/student/business"
				})
			},
			addtip(){
				this.tip.push(this.skills)
				this.hideModal()
			},
			removetip(index){
				this.tip.splice(index, 1);
			},
			DateChange(e) {
				this.birthday = e.detail.value
			},
			DateChanges(e) {
				this.student_time = e.detail.value
			},
			leftFile(){
				if(!this.real_name){
					uni.showToast({
						icon:'none',
						title:'请输入真实姓名',
						duration: 2000	
					});
					return;
				}
				if(!this.phone){
					uni.showToast({
						icon:'none',
						title:'请输入电话号码',
						duration:2000
					});
					return;
				}
				if(!this.birthday){
					uni.showToast({
						icon:'none',
						title:'请输入生日',
						duration:2000
					});
					return;
				}
				if(!this.weixin){
					uni.showToast({
						icon:'none',
						title:'请输入微信号',
						duration:2000
					});
					return;
				}
				if(!this.major){
					uni.showToast({
						icon:'none',
						title:'请输入您的专业',
						duration:2000
					});
					return;
				}
				if(!this.job_hope){
					uni.showToast({
						icon:'none',
						title:'请输入期望岗位',
						duration:2000
					});
					return;
				}
				if(!this.situation){
					uni.showToast({
						icon:'none',
						title:'请描述目前状况',
						duration:2000
					});
					return;
				}
				if(!this.degree){
					uni.showToast({
						icon:'none',
						title:'请描述您的学位信息',
						duration:2000
					});
					return;
				}
				if(!this.student_time){
					uni.showToast({
						icon:'none',
						title:'请描述您的入学时间',
						duration: 2000
					});
					return;
				}
				if(!this.tip || this.tip.length<=0){
					uni.showToast({
						icon:'none',
						title:'请描述您掌握的技能',
						duration: 2000
					});
					return;
				}
				httpPost({
					url:'/api/student/save_info',
					data:{
						real_name:this.real_name,
						phone:this.phone,
						birthday:this.birthday,
						weixin:this.weixin,
						student_time:this.student_time,
						job_hope:this.job_hope,
						situation:this.situation,
						degree:this.degree,
						skills:this.tip.join(','),
						major:this.major,
					},
				}).then((res)=>{
					console.log(res)
					msg('保存成功',()=>{
						uni.redirectTo({
							url:"business"
						})
					})
				});
			}
		}
	}
</script>

<style>
	/* .my-profile{
		padding-bottom: 150rpx;
	} */
	.profileList{
		width: 100%;
		height: 110rpx;
		text-align: left;
		line-height:110rpx;
		position: relative;
		border-bottom: solid 1px #E7EBED;
		color: #666666;
		padding-left: 35rpx;
	}
	.persomfir{
		padding: 30rpx 0rpx 30rpx 35rpx;
		width: 100%;
	}
	.wordright{
		float: right;
		margin-right: 35rpx;
		color: #333333;
		text-align: right;
	}
	.inputs{
		line-height: 110rpx;
		height: 110rpx;
		color: #333333;
		font-size: 30rpx;
		text-align: right;
		width: 80%;
		padding-right: 20rpx;
		/* flex: 1; */
	}
	.tarword{
		width: 18%;
	}
	.datalocat{
		margin-left: 300rpx;
	}
	.tarwords{
		width: 300rpx;
	}
	.wordTir{
		flex: 1;
	}
	.bar-btn{
		height:160rpx;
		width:100%;
		position:fixed;
		bottom:0;
		left:0;
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 20rpx 30rpx;
		z-index: 999;
	}
	.tags{
		background-color: #FFFFFF;
		/* width: 150rpx;
		height: 55rpx;
		border:solid;
		border-width: 1px; 
		border-color: #3b73f6;
		padding: 10rpx 20rpx 0rpx 20rpx;
		margin: 42rpx 0rpx 0rpx 30rpx; */
	}
	
	.info-title{
		padding: 30rpx;
	}
	.cuAdd{
		color: #3b73f6;
	}
	.info-content{
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		flex-wrap: wrap;
	}
	.tag-item{
		height: 56rpx;
		margin-top: 20rpx;
		margin-right: 24rpx;
		padding: 0 20rpx;
		border: 1px solid #3b73f6;
		font-size: 26rpx;
		color: #3b73f6;
		line-height: 54rpx;
		white-space: nowrap;
	}
	.linkman{
		margin-left: 15rpx;
		font-size: 30rpx;
		color: #333333;
	}
	.person_box{
		font-size: 35rpx;
		color: #3b73f6;
		margin-top: 2rpx;
		margin-left: 30rpx;
	}
	.modal_box{
		height: 400rpx;
	}
	
	.cu-modal.bottom-modal .cu-dialog{
		border-radius: 30rpx 30rpx 0 0;
	}
	
	.control_box{
		margin-top: 35rpx;
	}
	
	.apply_text{
		font-size: 31rpx;
		color: #333333;
		font-weight: bold;
		margin-left: 314rpx;
	}
	
	.cancel_text{
		font-size: 26rpx;
		color: #c6c6c6;
		margin-left: 245rpx;
		margin-top: 7rpx;
	}
	
	.imput_information{
		margin-top: 58rpx;
	}
	.input_box{
		width: 684rpx;
		margin: auto;
		border-style: solid;
		border-color: #e5e5e5;
		border-width: 2rpx;
		height: 80rpx;
		/* line-height: 80rpx; */
		border-radius: 10rpx;
		/* padding: 33rpx 25rpx; */
		/* justify-content: center; */
		align-items:center;
	}
	.modalbut{
		margin-top: 30rpx;
	}
	.datalocats{
		margin-left: 300rpx;
	}
	
</style>
